<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 先运行=>点击修改mysql课程按钮=>检查=>查看vue
    观察course数组,如果通过下标改变,它data确实也是变了,但是没有渲染到dom页面
    -->
    <div id="app">
        <h1>教师:{{name}}</h1>
        <button @click="changeName">修改教师名称</button>
        <button @click="changeCourse">修改mysql课程</button>
        <ul>
            <li v-for="c in course">
                {{c}}
            </li>
        </ul>
    </div>
    <script src="plugins/vue2.js"></script>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                name:'success',
                //数组比较特殊
                course:['mysql','vue','java']
            },
            methods:{
                changeName(){
                    this.name='蔡琪'
                },
                changeCourse(){
                    //直接通过数组的下标去修改值,那么不会被vue检测得到.
                    //this.course[0] = 'html'
                    //vue中对于数组的比如splice方法,slice方法,filter方法,sort方法都经过重新包装了.
                    //通过上面的这些包装好的方法来操作数组,那么才会被vue监测得到

                    //证明一下这些方法确实是经过包装的
                    //控制台: vm.course.splice==Array.prototype.splice 
                    //https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/push 
                    //返回false
                    this.course.splice(0,1,'html')
                }
            }
        });
    </script>
</body>
</html>